<template>
  <div
    class="component flex-column"
    :style="{
      backgroundColor: bgc,
      width: width,
      height: height
    }"
    >
    <div class="iconfont">&#xe64b;</div>
    <div
      class="text"
      :style="{
        fontSize: size,
        color: color
      }"
      >{{text}}</div>
  </div>  
</template>

<script>
export default {
  props: {
    bgc: {
      type: String,
      default: "#35343D"
    },
    text: {
      type: String
    },
    size: {
      type: String,
      default: "20rpx"
    },
    color: {
      type: String,
      default: "#ffffff"
    },
    addPhoto: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "160rpx"
    },
    height: {
      type: String,
      default: "128rpx"
    }
  },
  mounted() {
    if (this.addPhoto) {
      this.color  = "#D8D8D8",
      this.bgc = "#F6F6F9"
    }
  }
}
</script>

<style lang="less" scoped>
.component {
  .iconfont {
    font-size: 32rpx;
  }
}
</style>